<template>
    <div class="app-container">
        <a-card>
            <div class="tab-search-title">
                <a-form ref="formRef" :model="params" layout="inline" label-align="right" :hide-required-mark="false">
                    <a-form-item label="电站类型" name="inverterStationTypeId">
                        <a-select v-model:value="params.inverterStationTypeId" :options="station.typeList" :field-names="station.typeFieldNames" placeholder="请选择电站类型" />
                    </a-form-item>
                    <a-form-item label="电站名称" name="name">
                        <a-input v-model:value="params.name" placeholder="请输入电站名称" />
                    </a-form-item>
                    <a-form-item label="序列号" name="no">
                        <a-input v-model:value="params.no" placeholder="请输入序列号" />
                    </a-form-item>
                    <a-form-item label="关注状态" name="collect">
                        <a-select v-model:value="params.collect" placeholder="请选择关注状态" :options="station.collectList" allow-clear />
                    </a-form-item>
                    <a-form-item>
                        <a-button type="primary" @click="handleQuery">
                            <template #icon>
                                <SearchOutlined />
                            </template>
                            查询
                        </a-button>
                        <a-button @click="handleReset">
                            <template #icon>
                                <ReloadOutlined />
                            </template>
                            重置
                        </a-button>
                    </a-form-item>
                </a-form>
            </div>
            <div class="tabs-container">
                <a-button class="add-button" type="primary" @click="open(drawerRef)">
                    <template #icon>
                        <PlusOutlined />
                    </template>
                    新增
                </a-button>
                <a-tabs v-model:active-key="params.status" @change="onChange">
                    <a-tab-pane key="" tab="电站列表" />
                    <a-tab-pane v-for="item in station.dictList" :key="item.value" :tab="item.label" />
                </a-tabs>
            </div>
            <BasicTable ref="tableRef" :params="params" :columns="columns" :selectbox="false" :query="query" @select-change="selectChange">
                <template #table="{ body }">
                    <template v-if="body.column.key === 'name'">
                        <span class="name" @click="onClick(body.record.id)">{{ body.record.name }}</span>
                    </template>
                    <template v-if="body.column.key === 'inverterStationTypeId'">
                        {{ stationTypeName(body.record.inverterStationTypeId) }}
                    </template>
                    <template v-if="body.column.key === 'status'">
                        {{ dictName(body.record.status) }}
                    </template>
                    <template v-if="body.column.key === 'equivalentHours'">
                        {{ (body.record.dayElectric / body.record.capacity).toFixed(2) }}
                    </template>
                    <template v-if="body.column.key === 'monthElectric'">
                        {{ (body.record.monthElectric + body.record.dayElectric).toFixed(2) }}
                    </template>
                    <template v-if="body.column.key === 'yearElectric'">
                        {{ (body.record.yearElectric + body.record.dayElectric).toFixed(2) }}
                    </template>
                    <template v-if="body.column.key === 'totalElectric'">
                        {{ (body.record.totalElectric + body.record.dayElectric).toFixed(2) }}
                    </template>
                    <template v-if="body.column.key === 'collect'">
                        <heart-filled v-if="body.record.collect" />
                        <heart-outlined v-else />
                    </template>
                    <template v-if="body.column.key === 'action'">
                        <a-button type="link" @click="open(devicesDrawerRef, body.record)">
                            <template #icon>
                                <profile-outlined />
                            </template>
                            设备
                        </a-button>
                        <a-button type="link" @click="open(modalRef, body.record)">
                            <template #icon>
                                <UserOutlined />
                            </template>
                            负责人
                        </a-button>
                        <a-button type="link" @click="open(drawerRef, body.record)">
                            <template #icon>
                                <EditOutlined />
                            </template>
                            编辑
                        </a-button>
                        <a-popconfirm title="确定要删除吗?" @confirm="del(deleteById, body.record.id, tableRef)">
                            <a-button type="link">
                                <template #icon>
                                    <DeleteOutlined />
                                </template>
                                删除
                            </a-button>
                        </a-popconfirm>
                        <a-popconfirm :title="body.record.collect ? '确定要取消关注吗?' : '确定要关注吗?'" @confirm="onCollect(body.record.id, body.record.collect)">
                            <a-button type="link">
                                <template #icon>
                                    <link-outlined v-if="body.record.collect" />
                                    <heart-outlined v-else />
                                </template>
                                {{ body.record.collect ? '取关' : '关注' }}
                            </a-button>
                        </a-popconfirm>
                    </template>
                </template>
            </BasicTable>
        </a-card>
        <Drawer ref="drawerRef" @close="refresh(tableRef)" />
        <Modal ref="modalRef" @close="refresh(tableRef)" />
        <devices-drawer ref="devicesDrawerRef" />
    </div>
</template>
<script setup name="StationModule">
import { computed, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { DeleteOutlined, PlusOutlined, EditOutlined, UserOutlined, SearchOutlined, ReloadOutlined, HeartOutlined, HeartFilled, LinkOutlined, ProfileOutlined } from '@ant-design/icons-vue'
import { BasicTable, notice } from '@iframe/tools/components'
import { useBasicTable } from '@iframe/tools/mixins/BasicTableMixins'
import { query, deleteById, collect } from '/@/api/Inverter/Station'
import { list } from '/@/api/Inverter/StationType'
import { selectList } from '/@/api/System/Dict/DictItem/index.js'
import { SUCCESS_CODE } from '@iframe/tools/axios/axios.js'
import Drawer from './Drawer.vue'
import Modal from './User/Modal.vue'
import DevicesDrawer from './Devices/Drawer.vue'

const { refresh, del, open, selectChange } = useBasicTable()
const router = useRouter()

const formRef = ref()
const tableRef = ref()
const drawerRef = ref()
const modalRef = ref()
const devicesDrawerRef = ref()

const params = reactive({
    no: null,
    name: null,
    status: '',
    inverterStationTypeId: null,
    collect: null
})

const station = reactive({
    dictList: [],
    typeFieldNames: {
        value: 'id',
        label: 'name'
    },
    typeList: [],
    collectList: [
        {
            value: 0,
            label: '未关注'
        },
        {
            value: 1,
            label: '已关注'
        }
    ]
})

const stationTypeName = computed(() => {
    return typeId => {
        const type = station.typeList.find(item => item.id === typeId)
        return type ? type.name : '--'
    }
})

const dictName = computed(() => {
    return status => {
        const dict = station.dictList.find(item => item.value === status)
        return dict ? dict.label : '--'
    }
})

const columns = [
    {
        title: '电站名称',
        dataIndex: 'name',
        key: 'name',
        width: 180
    },
    {
        title: '电站类型',
        dataIndex: 'inverterStationTypeId',
        key: 'inverterStationTypeId',
        width: 130,
        align: 'center'
    },
    {
        title: '装机容量(kW)',
        dataIndex: 'capacity',
        key: 'capacity',
        width: 110,
        align: 'right'
    },
    {
        title: '功率(kW)',
        dataIndex: 'power',
        key: 'power',
        width: 110,
        align: 'right'
    },
    {
        title: '等效小时',
        dataIndex: 'equivalentHours',
        key: 'equivalentHours',
        width: 110,
        align: 'right'
    },
    {
        title: '日发电(kWh)',
        dataIndex: 'dayElectric',
        key: 'dayElectric',
        width: 110,
        align: 'right'
    },
    {
        title: '月发电(kWh)',
        dataIndex: 'monthElectric',
        key: 'monthElectric',
        width: 110,
        align: 'right'
    },
    {
        title: '年发电(kWh)',
        dataIndex: 'yearElectric',
        key: 'yearElectric',
        width: 110,
        align: 'right'
    },
    {
        title: '总发电(kWh)',
        dataIndex: 'totalElectric',
        key: 'totalElectric',
        width: 110,
        align: 'right'
    },
    {
        title: '地址',
        dataIndex: 'address',
        key: 'address'
    },
    {
        title: '关注状态',
        dataIndex: 'collect',
        key: 'collect',
        align: 'center',
        width: 100
    },
    {
        title: '操作',
        key: 'action',
        align: 'center',
        width: 450
    }
]

const onClick = id => {
    router.push(`/inverter/station/info?id=${id}`)
}

const onChange = () => {
    tableRef.value.handleRefresh()
}

const queryStationType = () => {
    list().then(result => {
        if (result.code === SUCCESS_CODE) {
            station.typeList = result.data
        }
    })
}

const queryDictItem = () => {
    selectList({ code: 'stationStatus' }).then(result => {
        if (result.code === SUCCESS_CODE) {
            station.dictList = result.data
        }
    })
}

const handleQuery = () => {
    tableRef.value.handleRefresh()
}

const handleReset = () => {
    formRef.value.resetFields()
    tableRef.value.handleRefresh()
}

const onCollect = (id, isCollect) => {
    collect({ stationId: id }).then(result => {
        if (result.code === SUCCESS_CODE) {
            notice.success(isCollect ? '取消关注成功' : '关注成功')
            tableRef.value.handleRefresh()
        }
    })
}

queryStationType()
queryDictItem()
</script>
<style lang="less" scoped>
.app-container {
    .tab-search-title {
        margin-bottom: 20px;

        :deep(.ant-form-item) {
            width: 300px;
        }

        :deep(.ant-form .ant-btn) {
            margin-left: 10px;
        }
    }
    .name {
        color: #1677ff;
        cursor: pointer;
    }
    .tabs-container {
        position: relative;

        .add-button {
            position: absolute;
            top: 7px;
            right: 10px;
            z-index: 66;
        }

        :deep(.ant-tabs-nav) {
            margin-bottom: 0;
        }

        :deep(.ant-tabs) {
            margin-top: 10px;
        }

        :deep(.anticon) {
            margin-right: 5px;
        }
    }
}
</style>
